<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交 - 喝水记录小管家</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="iphone-frame">
        <div class="status-bar">
            <div>9:41</div>
            <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
            </div>
        </div>
        
        <div class="content">
            <div class="flex justify-between items-center mb-6">
                <h1 class="text-2xl font-bold">社交圈</h1>
                <button class="bg-blue-50 text-blue-500 p-2 rounded-full">
                    <i class="fas fa-plus"></i>
                </button>
            </div>
            
            <div class="segment-control">
                <div class="segment-item active">排行榜</div>
                <div class="segment-item">动态</div>
            </div>
            
            <div class="card">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-semibold">本周排行</h2>
                    <div class="text-sm text-blue-500">查看全部</div>
                </div>
                
                <div class="friend-item">
                    <div class="friend-rank">1</div>
                    <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="用户头像" class="friend-avatar">
                    <div class="friend-info">
                        <div class="friend-name">李小花</div>
                        <div class="friend-status">连续达标 15 天</div>
                    </div>
                    <div class="badge">2350ml</div>
                </div>
                
                <div class="friend-item">
                    <div class="friend-rank">2</div>
                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="用户头像" class="friend-avatar">
                    <div class="friend-info">
                        <div class="friend-name">张大山</div>
                        <div class="friend-status">连续达标 12 天</div>
                    </div>
                    <div class="badge">2200ml</div>
                </div>
                
                <div class="friend-item">
                    <div class="friend-rank">3</div>
                    <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="用户头像" class="friend-avatar">
                    <div class="friend-info">
                        <div class="friend-name">王小美</div>
                        <div class="friend-status">连续达标 8 天</div>
                    </div>
                    <div class="badge">2100ml</div>
                </div>
                
                <div class="friend-item">
                    <div class="friend-rank">4</div>
                    <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="用户头像" class="friend-avatar">
                    <div class="friend-info">
                        <div class="friend-name">赵小伟</div>
                        <div class="friend-status">连续达标 7 天</div>
                    </div>
                    <div class="badge">2050ml</div>
                </div>
                
                <div class="friend-item">
                    <div class="friend-rank text-blue-500">8</div>
                    <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="用户头像" class="friend-avatar">
                    <div class="friend-info">
                        <div class="friend-name">我</div>
                        <div class="friend-status">连续达标 5 天</div>
                    </div>
                    <div class="badge">1900ml</div>
                </div>
            </div>
            
            <div class="card mt-6">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-semibold">好友动态</h2>
                </div>
                
                <div class="mb-6 pb-6 border-b border-gray-200">
                    <div class="flex items-center mb-3">
                        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="用户头像" class="w-10 h-10 rounded-full mr-3">
                        <div>
                            <div class="font-semibold">李小花</div>
                            <div class="text-xs text-gray-500">今天 10:30</div>
                        </div>
                    </div>
                    
                    <div class="text-gray-700 mb-3">
                        今天的目标完成啦！坚持喝水一个月，皮肤真的变好了，大家也要坚持哦！
                    </div>
                    
                    <div class="bg-blue-50 p-3 rounded-lg">
                        <div class="flex items-center">
                            <i class="fas fa-trophy text-yellow-500 mr-2"></i>
                            <div class="text-sm">
                                <span class="font-semibold">连续达标 30 天</span>
                                <span class="text-gray-500 ml-2">2023.09.15 - 2023.10.15</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex mt-3">
                        <div class="flex items-center mr-4">
                            <i class="far fa-heart text-gray-500 mr-1"></i>
                            <span class="text-sm text-gray-500">32</span>
                        </div>
                        <div class="flex items-center">
                            <i class="far fa-comment text-gray-500 mr-1"></i>
                            <span class="text-sm text-gray-500">8</span>
                        </div>
                    </div>
                </div>
                
                <div>
                    <div class="flex items-center mb-3">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="用户头像" class="w-10 h-10 rounded-full mr-3">
                        <div>
                            <div class="font-semibold">张大山</div>
                            <div class="text-xs text-gray-500">昨天 16:45</div>
                        </div>
                    </div>
                    
                    <div class="text-gray-700 mb-3">
                        分享一个小技巧：在手机上设置多个提醒，每次喝水后立即记录，这样就不会忘记了！
                    </div>
                    
                    <img src="https://images.unsplash.com/photo-1523362628745-0c100150b504?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1336&q=80" alt="饮水提示" class="w-full h-48 object-cover rounded-lg mb-3">
                    
                    <div class="flex">
                        <div class="flex items-center mr-4">
                            <i class="far fa-heart text-gray-500 mr-1"></i>
                            <span class="text-sm text-gray-500">18</span>
                        </div>
                        <div class="flex items-center">
                            <i class="far fa-comment text-gray-500 mr-1"></i>
                            <span class="text-sm text-gray-500">5</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="tab-bar">
            <div class="tab-item">
                <i class="fas fa-home tab-icon"></i>
                <span>首页</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-plus-circle tab-icon"></i>
                <span>记录</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-chart-line tab-icon"></i>
                <span>统计</span>
            </div>
            <div class="tab-item active">
                <i class="fas fa-users tab-icon"></i>
                <span>社交</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-user tab-icon"></i>
                <span>我的</span>
            </div>
        </div>
    </div>
</body>
</html>